<template>
	<view class="">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }" style="background-color: #FFFFFF;"></view>
		<!-- 顶部导航 开始 -->
		<selectHead left-button="转入" right-button="转出" class="selectBox" active-button="转入" @changeBtn="handleSelect">
			<view slot="left" @click="toHome()">
				<view class="" style="color: #FFFFFF;">主页</view>
			</view>
			<view slot="right">
				<view class="flex align-center" style="position: relative;">
					<view class="Tips end_top margin-left-xs" style="margin-right: 5rpx;position: absolute;left: -72rpx;">
						<image src="/static/images/search.png" mode="widthFix" style="width: 50rpx;"></image>
					</view>
					<view class="Tips end_top margin-left-xs" @click="tonavigateTo('/pages/public/msg/msg')">
						<image src="/static/images/msg.png" mode="widthFix" style="width: 50rpx;"></image>
					</view>
				</view>
			</view>
		</selectHead>
		<!-- 顶部导航 结束 -->
		
		<view class="bg_12161F">
			
			<view class="cu-form-group" style="color:#FA3534">
				<text>平台专用收银台（请复制后转入）</text>
			</view>
			
			<view class="cu-form-group">
				<view class="title text-black">账户名称</view>
				<input placeholder="请填写账户名称" class="color_A8AFC2" name="input" v-model="data.name"></input>
				<view>
					<image  @click="copy(data.name)" src="/static/imgs/bankslices/fuzhi.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">账户银行</view>
				<input placeholder="请填写账户银行" class="color_A8AFC2" name="input" v-model="data.openbank"></input>
				<view>
					<image  @click="copy(data.openbank)" src="/static/imgs/bankslices/fuzhi.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">银行卡号</view>
				<input placeholder="请填写银行卡号" class="color_A8AFC2" name="input" v-model="data.cardno"></input>
				<view >
					<image  @click="copy(data.cardno)" src="/static/imgs/bankslices/fuzhi.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
			</view>
		</view>
		
		<view class="cu-form-group" style="color:#FA3534">
			<text>温馨提醒：您的VIP存款卡号仅限当日当次时段，30分钟内使用有效，超时请联系在线客服领取新的卡号，为保障您的资金安全，请您获取卡号后第一时间进行存款，其他时间不可擅自向该卡号转账，若违规转账对您造成任何损失均由您本人自行承担。有任何疑问随时联系在线客服确认哦~</text>
		</view>
		
		<view class="bg_12161F margin-top-sm">
			<view class="cu-form-group">
				<view class="title text-black">转入金额</view>
				<input placeholder="请输入转入金额" class="color_A8AFC2" name="input" type="number" v-model="form.money"></input>
				<view>
					<image src="/static/images/icon/money.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">汇款姓名</view>
				<input placeholder="请输入汇款人姓名" class="color_A8AFC2" name="input" v-model="form.uname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">汇款账户</view>
				<input placeholder="请输入汇款账户" class="color_A8AFC2" name="input" v-model="form.ucardno"></input>
			</view>
		</view>
		
		<view class="padding-lr-xl padding-top-xl flex flex-direction">
			<button class="cu-btn lg" @click="addRecharge()" style="background-color: #EE515A;color: #FFFFFF;">我已转账</button>
		</view>
<!-- 		<view class="padding-lr-xl padding-top-xl flex flex-direction">
			<button class="cu-btn lg" @click="customer()" style="background-color: #EE515A;color: #FFFFFF;">联系客服</button>
		</view> -->
		<view class="text-center color_A8AFC2 text-df margin-top">*复制银行卡信息，转账后确认转入。</view>
		
		<u-row gutter="12" style="margin-left: 12px;margin-top: 10px;">
			<text style="color: rgb(165, 168, 175);">尊敬的用户您好：</text>
		</u-row>
		<u-row gutter="12" style="padding-left: 10px;padding-right: 10px;">
			<text style="text-indent:40px;color: rgb(165, 168, 175);">转入时间为：（早上9：00--晚上21：00）到账时间为：正常2小时内到账，以银行审核为准！为了让您有更好的体验，避免转入高峰期到账不及时的情况，请联系客服查询银行到账状态！</text>
		</u-row>
		
		
		<!-- 新版本结束 -->

		<view>
			<u-toast ref="uToast" />
		</view>

		<view class="new_kf">
			<image
			 @tap="customer"
			style="width: 100upx; height: 100upx;" 
			:src="show_qiye_kf"
			@error="imageError">
			</image>
		</view>

	</view>
</template>

<script>

	import selectHead from "@/component/selectHead/selectHead.vue"
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		components: {
			selectHead
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				show_qiye_kf: '/static/img/kf.png',
				qqserver:"",
				form: {
					money: '',
					ucardno: '',
					uname: '',
					account: ''
				},
				data: {},
				rechargeConfig: {
					min: 100,
					max: 200000,
				},
				moneyPlaceholder: "最低100",
			};
		},
		methods: {
			// 到首页
			toHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//切换头部选项卡
			handleSelect(type){
				if(type == 'right'){
					uni.redirectTo({
					    url: "/pages/member/cash"
					});
				}
			},
			//返回
			handleBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getBank() {
				this.$Request.get(this.$api.index.getBank2).then(res => {
					if (res.code == 0) {
						this.data = res.data[0];
					}
				})
			},
			getRechargeConfig() {
				this.$Request.get(this.$api.index.rechargeConfig).then(res => {
					if (res.code == 0) {
						this.rechargeConfig = res.data;
						this.moneyPlaceholder = "最低" + res.data.min;
					}
				})
			},
			copy: function(msg) {
				uniCopy({
					content: msg,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			//客服中心
			customer: function() {
				if(this.qqserver){
					//#ifdef H5
					window.location.href=this.qqserver;
					//#endif
					//#ifndef H5
					plus.runtime.openURL(this.qqserver);
					//#endif
				}else{
					window.location.href="https://www.google.com";
				}
			},
			addRecharge() {
				if (!this.form.money || !this.form.ucardno || !this.form.uname) {
					this.$refs.uToast.show({
						title: '请完整输入汇款信息！',
					})
					return;
				}
				if (this.data == null || this.data.length == 0) {
					this.$refs.uToast.show({
						title: "未选择对公账户，请联系客服或稍后再试！",
					})
					return;
				}
				var that = this;
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				this.$Request.post(this.$api.index.addRecharge, {
					money: this.form.money,
					ucardno: this.form.ucardno,
					uname: this.form.uname,
					bankid: this.data.id,
				}).then(res => {
					setTimeout(() => {
						uni.hideLoading();
						that.$refs.uToast.show({
							title: res.msg,
						});
						that.form = {};
						if (res.code == 0) {
							uni.redirectTo({
								url: "/pages/index/myMoney?current=4"
							});
						}
					}, 2000);
				})
			}
		},
		onLoad(e) {
			this.flag = e.flag;
			this.getBank();
			this.getRechargeConfig();
			this.$Request.get(this.$api.index.userInfo).then(res => {
				if (res.qqserver) {
					this.qqserver = res.qqserver;
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "./recharge.scss";
	.selectBox{
		background-color: #EE515A;
	}
	.cu-form-group{
		background-color: #FFFFFF;
	}
	.cu-form-group + .cu-form-group {
	    border-top: 1px solid #EDEDED;
	}
	.cu-form-group uni-input{
		color: #333333;
	}
	.text-black{
		font-weight: 600;
	}
	.new_kf{
		position: fixed;
		right: 6upx;
		top:42%;
	}
</style>
